<template>
  <div>
    <div class="tabbar">
      <md-tab-bar v-model="current" :items="items" @change="onTabChange" />
    </div>
    <div>
      <md-scroll-view
        ref="scrollView"
        :scrolling-x="false"
        :auto-reflow="true"
        @endReached="onEndReached"
        @refreshing="onRefresh"
      >
        <md-scroll-view-refresh
          slot="refresh"
          slot-scope="{ scrollTop, isRefreshActive, isRefreshing }"
          :scroll-top="scrollTop"
          :is-refreshing="isRefreshing"
          :is-refresh-active="isRefreshActive"
        ></md-scroll-view-refresh>
        <msg-card
          v-for="(item, index) in data"
          :key="index"
          :msgList="item"
          :isMessage="is_message"
        ></msg-card>
        <md-scroll-view-more
          slot="more"
          :is-finished="isFinished"
          finished-text="已经到底啦~"
        >
        </md-scroll-view-more>
      </md-scroll-view>
    </div>
  </div>
</template>

<script>
import {
  Swiper,
  SwiperItem,
  TabBar,
  Icon,
  Popup,
  PopupTitleBar,
  ScrollView,
  ScrollViewMore,
  ScrollViewRefresh
} from "mand-mobile";
export default {
  name: "message",
  components: {
    msgCard: () => import("@/components/messageCard/index"),
    [Swiper.name]: Swiper,
    [SwiperItem.name]: SwiperItem,
    [TabBar.name]: TabBar,
    [ScrollView.name]: ScrollView,
    [ScrollViewMore.name]: ScrollViewMore,
    [ScrollViewRefresh.name]: ScrollViewRefresh,
    [Icon.name]: Icon,
    [Popup.name]: Popup,
    [PopupTitleBar.name]: PopupTitleBar
  },
  data() {
    return {
      current: 1,
      items: [{ name: 1, label: "订单消息" }, { name: 2, label: "平台通知" }],
      data: "",
      curpage: 1,
      sort_type: null,
      search_key: null,
      isFinished: false,
      is_message: true,
      type: "1"
    };
  },
  methods: {
    onTabChange(item, index) {
      switch (index) {
        case 0:
          this.type = "1";
          this.is_message = true;
          break;
        case 1:
          this.type = "2";
          this.is_message = false;
          break;
      }
      this.curpage = 1;
      this.getInfo(true);
    },
    onEndReached() {
      if (this.isFinished) {
        return;
      }
      this.curpage++;
      this.getInfo();
    },
    onRefresh() {
      this.$nextTick(() => {
        this.curpage = 1;
        this.isFinished = false;
        this.getInfo(true);
      });
    },
    getInfo(refresh) {
      this.$ajax
        .post(this.$api.getNewsList, {
          curpage: this.curpage,
          type: this.type
        })
        .then(res => {
          if (refresh) {
            this.data = res.data.list;
            this.$refs.scrollView.finishRefresh();
          } else {
            this.data.push.apply(this.data, res.data.list);
          }
          if (this.curpage === res.data.total_page) {
            this.isFinished = true;
          }
          this.$refs.scrollView.finishLoadMore();
        })
        .catch(err => {
          this.$toast.failed(err);
        });
    }
  },
  created() {
    this.getInfo(true);
  }
};
</script>

<style scoped lang="stylus">
.md-tab-bar{
  background-color #ffffff;
  padding-top 18px;
}
</style>
